@{
    Layout = "~/Views/Shared/_Layout_List.cshtml";
}

<div class="fx-content">
    <div class="fx-wrapper">
        <form class="form-inline form-group-sm" id="searchForm">
            <div class="form-group">
                <label>日志内容</label>
                <input type="text" class="form-control input-sm" name="logContent">
            </div>
            <div class="form-group">
                <label>日志级别</label>
                <select class="selectpicker" name="level" data-style="btn-default btn-sm" data-width="100px">
                    <option value="">请选择</option>
                    <option value="Trace">Trace</option>
                    <option value="Debug">Debug</option>
                    <option value="Info">Info</option>
                    <option value="Warn">Warn</option>
                    <option value="Error">Error</option>
                    <option value="Fatal">Fatal</option>
                </select>
            </div>
            <div class="form-group">
                <label>日志类别</label>
                <select class="selectpicker" id="logType" name="logType" data-style="btn-default btn-sm" data-width="100px">
                    <option value="">请选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>用户名</label>
                <input name="opUserName" type="text" class="form-control input-sm">
            </div>
            <br />
            <div class="form-group">
                <label>时间</label>
                <input name="startTime" id="startTime" type="text" data-date-format="yyyy-mm-dd hh:ii:ss" class="form-control">
                <label>~</label>
                <input name="endTime" id="endTime" type="text" data-date-format="yyyy-mm-dd hh:ii:ss" class="form-control">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default btn-sm" onclick="javascript: $('#dataTable').bootstrapTable('refresh', { silent: true });">
                    <i class="glyphicon glyphicon-search"></i>
                    查询
                </button>
            </div>
        </form>
    </div>
    <div class="fx-wrapper">
        <table id="dataTable" class="table-bordered"></table>
    </div>
</div>

<script>
    var $table = $('#dataTable');

    $(function () {
        initTable();
        bindEvent();
    });

    function bindEvent() {
        $('#logType').selectpicker({
            url: '/Base_SysManage/Base_SysLog/GetLogTypeList',
            textField: 'Name',
            valueField: 'Value'
        });
        $('#startTime').datetimepicker({
            language: 'zh-CN',
        });
        $('#endTime').datetimepicker({
            language: 'zh-CN',
        });
    }

    //初始化表格
    function initTable() {
        $table.bootstrapTable({
            url: '/Base_SysManage/Base_SysLog/GetLogList',
            idField: 'Id',
            pagination: true,
            method: 'post',
            clickToSelect: false,
            sidePagination: "server",
            contentType: 'application/x-www-form-urlencoded',
            queryParamsType: '',
            sortName: 'OpTime',
            sortOrder: 'desc',
            pageNumber: 1,
            pageSize: 30,
            pageList: [10, 30, 60, 100],
            columns: [
                //{ title: 'ck', field: 'ck', checkbox: true, width: '3%' },
                { title: '日志级别', field: 'Level', width: '5%' },
                { title: '日志类型', field: 'LogType', width: '10%' },
                {
                    title: '日志内容', field: 'LogContent', width: '60%', formatter: function (value) {

                        return (value || '').replace(/\n/g, "<br />");
                    }
                },
                { title: '操作员用户名', field: 'OpUserName', width: '5%' },
                { title: '日志记录时间', field: 'OpTime', width: '10%' }
            ],
            queryParams: function (params) {
                var searchParams = $('#searchForm').getValues();
                $.extend(params, searchParams);

                return params;
            },
            //自定义字体颜色，或者背景颜色
            rowStyle: function (row, index) {
                var color = '';
                var value = row['Level'];
                if (value == 'Warn') {
                    color = '#FF7F00';
                } else if (value == 'Error' || value == 'Fatal') {
                    color = '#ed5565';
                }

                var style = {};
                style = { css: { 'color': color } };
                return style;
            }
        });
    }
</script>
